import React, { Component } from 'react'
// HOC高级组件不是组件，是函数，这个函数的参数和返回值都是组件
const Fn = (C) => {
  // 返回值也是一个组件
  return class extends Component {
    render() {
      return (
        <>
          {/* p是高阶组件加入的功能 */}
          <p>我是一个高级组件...</p>
          {/* C是组件原有的功能 */}
          <C {...this.props}></C>
        </>
      )
    }
  }
}

class Com1 extends Component {
  render() {
    return (
      <div>我是Com1</div>
    )
  }
}
class Com2 extends Component {
  render() {
    return (
      <div>我是Com2</div>
    )
  }
}

// 通过高阶组件强化已有的组件.Com1本身是组件，通过FN强化后，会返回一个新的组件，就是FnCom1
const FnCom1 = Fn(Com1);
const FnCom2 = Fn(Com2);

export default class Base extends Component {
  render() {
    return (
      <div>
        <p>以下是高阶组件强化后的新组件：</p>
        <FnCom1></FnCom1>
        <FnCom2></FnCom2>
      </div>
    )
  }
}
